<template>
    <div class="index">
        <div class="breadcrumb">
            <div class="title">当前位置：</div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-row type="flex" class="row-bg" justify="center" :gutter="20">
            <el-col :span="4">
                <div class="tag_item">
                    <i class="el-icon-money" style="font-size:30px"></i>
                    <div>昨日佣金</div>
                    <div>{{yesterday_price}}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="tag_item">
                    <i class="el-icon-coin" style="font-size:30px"></i>
                    <div>佣金金额</div>
                    <div>{{price_total}}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="tag_item">
                    <i class="el-icon-mobile" style="font-size:30px"></i>
                    <div>待分佣金</div>
                    <div>{{credit}}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="tag_item">
                    <i class="el-icon-s-shop" style="font-size:30px"></i>
                    <div>新增店铺</div>
                    <div>{{newadd_shop_total}}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="tag_item">
                    <i class="el-icon-s-marketing" style="font-size:30px"></i>
                    <div>交易笔数</div>
                    <div>{{order_total}}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="tag_item">
                    <i class="el-icon-pie-chart" style="font-size:30px"></i>
                    <div>交易金额</div>
                    <div>{{order_price_total}}</div>
                </div>
            </el-col>
        </el-row>
        <div class="charts">
            <div class="charts_title">
                <div class="title">统计</div>

            </div>
            <div class="cont">
                <div class="date">
                    <el-date-picker
                    v-model="date"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="getList"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
                <ve-line :data="chartData"></ve-line>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            date:'',
            yesterday_price:'',// 昨日佣金
            price_total:'',//佣金金额
            credit:'',//待分佣金
            newadd_shop_total:'',//新增店铺
            order_total:'',//交易笔数
            order_price_total:'',//交易金额
            chartData: {
                columns: ['日期','收益金额'],
                rows: []
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    mounted(){
       this.getList() 
    },
    computed:{
        
    },
    methods:{

        //获取列表
        async getList(){
            let starttime=''
            let endtime=''
            if (this.date) {
                starttime = this.date[0]
                endtime = this.date[1]
            }
            let req = new FormData()
            req.append('starttime',starttime)
            req.append('endtime',endtime)
            let{data:{status,result}} = await this.$http.post(this.$api.home_index,req)
            if (status == 0) {
                this.credit = result.credit
                this.chartData.rows = result.fenyong_list
                this.newadd_shop_total = result.newadd_shop_total
                this.order_price_total = result.order_price_total
                this.order_total = result.order_total
                this.price_total = result.price_total
                this.yesterday_price = result.yesterday_price
            }
        },
    }
}
</script>
<style lang="scss" scoped>
    .index{
        padding: 20px;
        .breadcrumb{
            display: flex;
            align-items: center;
        }
        .row-bg{
            margin: 40px auto;
            .tag_item{
                width: 100%;
                padding: 30px 0;
                background-color: #ffffff;
                border-radius: 10px;
                text-align: center;
            }
        }
        .charts{
            background-color: #ffffff;
            
            .charts_title{
                padding: 10px 20px;
                border-bottom: 1px solid #f0f0f0;
                display: flex;
                .title{
                    border-left: 2px solid rgb(14, 145, 233);
                    padding-left: 10px;
                }
                .tab{
                    display: flex;
                    margin: 0 auto;
                    .item{
                        width: 64px;
                        text-align: center;
                        cursor: pointer;
                        position: relative;
                        margin: 0 10px;
                    }
                    .item.active::after{
                        content: "";
                        width: 100%;
                        height: 2px;
                        background-color:  rgb(14, 145, 233);
                        position: absolute;
                        left: 0;
                        bottom: -11px;
                    }
                }
            }
            .cont{
                padding: 20px;
                box-sizing: border-box;
                .date{
                    text-align: right;
                }
            }
        }
    }
</style>